import React, { Component } from 'react'
import '../style/addrole.scss'
import { Divider, Form, Input, Button, Checkbox } from 'antd'
import axios from 'axios'

export default class AddRole extends Component {
    contentRef = React.createRef();
    systemRef = React.createRef();
    memberRef = React.createRef();
    articleRef = React.createRef();
    // //发送服务器请求
    postData = (event) => {
        event.preventDefault();
        if(this.contentRef.current.state.value===''){
            alert("角色名不能为空")
        }else{
            axios({
                method: "post",
                url: "/api1/addrole?timetamp=" + new Date().getTime(),
                params: {
                    content: this.contentRef.current.state.value,
                    author: JSON.stringify({
                        "system": this.systemRef.current.state.checked,
                        "member":this.memberRef.current.state.checked,
                        "article": this.articleRef.current.state.checked,
                    })
                }
            }).then(res => {
                console.log(res.data);
                alert("添加成功")
            })
        }
       
    }
    
    render() {
        return (
            <div id="add-role">
                <Divider />
                <header>增加角色</header>
                <Divider />
                <form action="" method="" onSubmit={this.postData}>
                    <Form.Item
                        label="角色名称"
                        className="user-name flex_start"
                    >
                        <Input className="user-in" size='large' ref={this.contentRef} />
                    </Form.Item>
                    <Form.Item
                        label="权限"
                        className="user-author flex_start"
                    >
                        <Checkbox ref={this.systemRef}>系统设置</Checkbox>
                        <Checkbox ref={this.memberRef}>会员管理</Checkbox>
                        <Checkbox ref={this.articleRef}>文章管理</Checkbox>

                    </Form.Item>
                    <Button type="primary" htmlType="submit">立即创建</Button>
                </form>
            </div>
        )
    }
}
